<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public/reset.css">
    <link rel="stylesheet" href="./public/indexcontent.css">
    <link rel="stylesheet" href="./public/floor-control.css">
    <style>
        /* advertisement */
        #advertisement {
            width: 100%;
        }

        .advertisement {
            width: 1200px;
            margin: 0px auto;
            display: flex;
        }

        .advertisement>.ad-left {
            width: 200px;
        }

        .iconAD {
            color: #dd0044;
            font-size: 16px;
        }

        .advertisement>.ad-center {
            margin: 0px 5px;
        }

        .advertisement>.ad-center>.banner {
            margin-top: 10px;
            width: 720px;
            height: 290px;
            position: relative;
            overflow: hidden;
        }


        .advertisement>.ad-center>.ad-c-bottom>ul {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .advertisement>.ad-center>.ad-c-bottom>li {
            box-sizing: border-box;
        }

        .advertisement>.ad-center>.ad-c-bottom>ul img {
            width: 99%;
            height: 99%;
        }

        .advertisement>.ad-right {
            margin-left: 5px;
            width: 265px;
        }

        .advertisement>.ad-right>.ad-r-top {
            margin-top: 10px;
            border: 1px solid #666;
        }

        .advertisement>.ad-right>.ad-r-top>ul>li {
            border-top: 1px solid #666;
        }

        .advertisement>.ad-right>.ad-r-middle {
            border-top: 1px solid #666;
            border-left: 1px solid #666;
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
        }

        .advertisement>.ad-right>.ad-r-middle>div {
            width: 88px;
            height: 88px;
            border-bottom: 1px solid #666;
            border-right: 1px solid #666;
            padding-top: 20px;
            font-size: 12px;
            text-align: center;
            box-sizing: border-box;
        }

        .advertisement>.ad-right>.ad-r-bottom {
            border: 1px solid #666;
            margin-top: 10px;
        }

        /* banner3D */
        #banner3D {
            width: 100%;
        }

        .banner3D {
            width: 1200px;
            height: 200px;
            margin: 0px auto;
        }

        .banner .imgbox{width: 100%;height: 100%;}
        .banner .imgbox img{width: 100%;position: absolute;left:1000px;top:0;}
        .banner .imgbox img:first-child{left:0;}

        .banner .btns *{position: absolute;top:130px;width: 40px;height: 40px;border: none;background: rgba(0,0,0,0.9);}
        .banner #left{left:0}
        .banner #right{right:0}

        .banner .list{display: flex;align-items: center;justify-content: end;background: rgba(0,0,0,0.6);height: 30px;line-height:30px;text-align: center;position: absolute;bottom: 0;left:0;width: 100%;}
        .banner .list span{width: 17px;height: 17px;border-radius: 50%;cursor: pointer;background: rgba(200,200,200,0.6);margin-right: 10px;}
        .banner .list span.active{background: red;color:#fff;}



    </style>
</head>
<script src="./JSlibrary/icon/font_index_head/iconfont.js"></script>
<script src="./JSlibrary/icon/allClassificationOfGoods/iconfont.js"></script>
<script src="./JSlibrary/icon/footer/iconfont.js"></script>
<script src="./public/JQuery/jquery.3.5.0.js"></script>
<script src="./public/JQuery/jquery.banner.js"></script>
<body>
    <div id="header"></div>
    <div id="advertisement">
        <div class="advertisement">
            <div class="ad-left">
                <ul>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-w_bijiben"></use>
                        </svg>办公用纸</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-haocaiguanli
                            "></use>
                        </svg>办公耗材</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-dayinji"></use>
                        </svg>办公设备</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-bangongyongpin
                            "></use>
                        </svg>办公文具</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-taishidiannao"></use>
                        </svg>电脑及配件</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-shubiao"></use>
                        </svg>数码设备</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-zuojitianchong"></use>
                        </svg>通讯设备</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-icon1"></use>
                        </svg>办公家电</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-shenghuoyongpin2
                            "></use>
                        </svg>生活用品</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-shezhi"></use>
                        </svg>工器具</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-jiaoshoutao_glove"></use>
                        </svg>劳防用品</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-shafa"></use>
                        </svg>办公家具</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-V"></use>
                        </svg>食品饮料</li>
                    <li> <svg class="icon iconAD" aria-hidden="true">
                            <use xlink:href="#icon-baobei"></use>
                        </svg>商务礼品</li>
                </ul>
            </div>
            <div class="ad-center">
                <div class="banner"></div>
                <div class="ad-c-bottom">
                    <ul>
                        <li><a href=""><img src="./images/index/advertisement/center/sale2001.jpg" alt=""></a></li>
                        <li><a href=""><img src="./images/index/advertisement/center/sale2002.jpg" alt=""></a></li>
                        <li><a href=""><img src="./images/index/advertisement/center/sale2003.jpg" alt=""></a></li>
                        <li><a href=""><img src="./images/index/advertisement/center/sale2004.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="ad-right">
                <div class="ad-r-top">
                    <p><span>得力公告</span><a>更多</a></p>
                    <ul>
                        <li><a href="">年末回馈活动实现新跨</a><span>2019.12.30</span></li>
                        <li><a href="">捷报频传得力集团斩获</a><span>2019.12.06</span></li>
                        <li><a href="">得力集团荣获“2019年</a><span>2019.12.06</span></li>
                    </ul>
                </div>
                <div class="ad-r-middle">
                    <div><a href=""><img src="./images/index/advertisement/right/tool_01.png" alt="">
                            <p>易采专区</p>
                        </a>
                    </div>
                    <div><a href=""><img src="./images/index/advertisement/right/tool_02.png" alt="">
                            <p>订单审批</p>
                        </a>
                    </div>
                    <div><a href=""><img src="./images/index/advertisement/right/tool_03.png" alt="">
                            <p>订单查询</p>
                        </a>
                    </div>
                    <div><a href=""><img src="./images/index/advertisement/right/tool_04.png" alt="">
                            <p>快速订单</p>
                        </a>
                    </div>
                    <div><a href=""><img src="./images/index/advertisement/right/tool_05.png" alt="">
                            <p>耗材搜索</p>
                        </a>
                    </div>
                    <div><a href=""><img src="./images/index/advertisement/right/tool_06.png" alt="">
                            <p>在线客服</p>
                        </a>
                    </div>
                </div>
                <div class="ad-r-bottom">
                    <p><span>刊物下载</span><a href="">更多</a></p>
                    <div>
                        <img src="./images/index/advertisement/right/right_bottom.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="banner3D">
        <div class="banner3D">
            <div>
                <img src="" alt="">
            </div>
            <ul>
                <li>
                    <img src="" alt="">
                </li>
                <li>
                    <img src="" alt="">
                </li>
                <li>
                    <img src="" alt="">
                </li>
                <li>
                    <img src="" alt="">
                </li>
                <li>
                    <img src="" alt="">
                </li>
                <li>
                    <img src="" alt="">
                </li>
                <li>
                    <img src="" alt="">
                </li>
                <li>
                    <img src="" alt="">
                </li>
            </ul>
        </div>
    </div>
    <div id="content">
        <div class="floor-01 floor">
            <div class="floor-nav">
                <h1><span>1F</span><span>办公设备/办公耗材</span></h1>
                <ul>
                    <li><a href="">复印机</a></li>
                    <li><a href="">打印机</a></li>
                    <li><a href="">扫描仪</a></li>
                    <li><a href="">投影仪</a></li>
                    <li><a href="">硒鼓</a></li>
                    <li><a href="">色带</a></li>
                </ul>
            </div>
            <div class="floor-content">
                <div class="floor-content-ad">
                    <img src="" alt="">
                </div>
                <div class="floor-content-product">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <div class="floor-content-banner">
                    <h2>热卖排行榜</h2>
                    <div class="hot-banner">

                    </div>
                </div>
            </div>
            <div id="floor-ad">
                <img src="" alt="">
            </div>
        </div>
        <div class="floor-02 floor">
            <div class="floor-nav">
                <h1><span>2F</span><span>办公设备/办公耗材</span></h1>
                <ul>
                    <li><a href="">复印机</a></li>
                    <li><a href="">打印机</a></li>
                    <li><a href="">扫描仪</a></li>
                    <li><a href="">投影仪</a></li>
                    <li><a href="">硒鼓</a></li>
                    <li><a href="">色带</a></li>
                </ul>
            </div>
            <div class="floor-content">
                <div class="floor-content-ad">
                    <img src="" alt="">
                </div>
                <div class="floor-content-product">
                    <div>
                        <a href="">
                            <h2>惠普（HP）NS1020c黑白激光</h2>
                            <p>智能闪充 高速打印</p>
                            <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                        </a>
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                </div>
                <div class="floor-content-banner">
                    <h2>热卖排行榜</h2>
                    <div class="hot-banner">

                    </div>
                </div>
            </div>
            <div id="floor-ad">
                <img src="" alt="">
            </div>
        </div>
        <div class="floor-03 floor">
            <div class="floor-nav">
                <h1><span>3F</span><span>办公设备/办公耗材</span></h1>
                <ul>
                    <li><a href="">复印机</a></li>
                    <li><a href="">打印机</a></li>
                    <li><a href="">扫描仪</a></li>
                    <li><a href="">投影仪</a></li>
                    <li><a href="">硒鼓</a></li>
                    <li><a href="">色带</a></li>
                </ul>
            </div>
            <div class="floor-content">
                <div class="floor-content-ad">
                    <img src="" alt="">
                </div>
                <div class="floor-content-product">
                    <div>
                        <a href="">
                            <h2>惠普（HP）NS1020c黑白激光</h2>
                            <p>智能闪充 高速打印</p>
                            <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                        </a>
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                </div>
                <div class="floor-content-banner">
                    <h2>热卖排行榜</h2>
                    <div class="hot-banner">

                    </div>
                </div>
            </div>
            <div id="floor-ad">
                <img src="" alt="">
            </div>
        </div>
        <div class="floor-04 floor">
            <div class="floor-nav">
                <h1><span>4F</span><span>办公设备/办公耗材</span></h1>
                <ul>
                    <li><a href="">复印机</a></li>
                    <li><a href="">打印机</a></li>
                    <li><a href="">扫描仪</a></li>
                    <li><a href="">投影仪</a></li>
                    <li><a href="">硒鼓</a></li>
                    <li><a href="">色带</a></li>
                </ul>
            </div>
            <div class="floor-content">
                <div class="floor-content-ad">
                    <img src="" alt="">
                </div>
                <div class="floor-content-product">
                    <div>
                        <a href="">
                            <h2>惠普（HP）NS1020c黑白激光</h2>
                            <p>智能闪充 高速打印</p>
                            <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                        </a>
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                </div>
                <div class="floor-content-banner">
                    <h2>热卖排行榜</h2>
                    <div class="hot-banner">

                    </div>
                </div>
            </div>
            <div id="floor-ad">
                <img src="" alt="">
            </div>
        </div>
        <div class="floor-05 floor">
            <div class="floor-nav">
                <h1><span>5F</span><span>办公设备/办公耗材</span></h1>
                <ul>
                    <li><a href="">复印机</a></li>
                    <li><a href="">打印机</a></li>
                    <li><a href="">扫描仪</a></li>
                    <li><a href="">投影仪</a></li>
                    <li><a href="">硒鼓</a></li>
                    <li><a href="">色带</a></li>
                </ul>
            </div>
            <div class="floor-content">
                <div class="floor-content-ad">
                    <img src="" alt="">
                </div>
                <div class="floor-content-product">
                    <div>
                        <a href="">
                            <h2>惠普（HP）NS1020c黑白激光</h2>
                            <p>智能闪充 高速打印</p>
                            <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                        </a>
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                    <div>
                        <h2>惠普（HP）NS1020c黑白激光</h2>
                        <p>智能闪充 高速打印</p>
                        <img src="https://b2bimgcdn.nbdeli.com/Storage/cmsimages/floor/f2-1.jpg" alt="">
                    </div>
                </div>
                <div class="floor-content-banner">
                    <h2>热卖排行榜</h2>
                    <div class="hot-banner">

                    </div>
                </div>
            </div>
            <div id="floor-ad">
                <img src="" alt="">
            </div>
        </div>
    </div>
    <div id="footer"></div>
    <ul id="floor-control">
        <li class="aaa">文具<br>纸品</li>
        <li>设备<br>耗材</li>
        <li>电脑<br>数码</li>
        <li>生活<br>劳保</li>
        <li>家电<br>家具</li>
        <div>顶部</div>
    </ul>
</body>
<script>
    $.ajax({
        url:"http://localhost:3000/database/indexBanner.json",
        dataType:"json",
        success:function(res){
            $(".banner").banner(res,{          
            btn:false,
        })
        }
    })
    $.ajax({
        url:"http://localhost:3000/database/goodsBasic.json",
        dataType:"json",
        success:function(res){
            for(let i=0;i<6;i++){
                $(".floor-01").children(".floor-content").children(".floor-content-product").children().eq(i).append(`
                <div>
                    <a href="">
                        <h2>${res.msg[i].GoodsName}</h2>
                        <p>得力，办公当然更得力</p>
                        <img src="./images/${res.msg[i].src}.jpg" alt="">
                    </a>
                </div>`);
            }
        }
    });
    $.ajax({
        url:"http://localhost:3000/database/indexAD.json",
        dataType:"json",
        success:function(res){
            for(let i=0;i<res.length;i++){
                $(".floor").eq(i).find(".floor-content-ad").children("img").attr("src",`${res[i].src}`)
            }
        }
    })
    $.ajax({
        url:"http://localhost:3000/database/indexADB.json",
        dataType:"json",
        success:function(res){
            for(let i=0;i<res.length;i++){
                $(".floor").eq(i).find("#floor-ad").children("img").attr("src",`./images/indexADB/${res[i].src}`)
            }
        }
    })
</script>
<script>
    $("#floor-control").children("li").click(function () {
        $("html").animate({
            scrollTop: $("#content").children("div").eq($(this).index()).offset().top
        })
    })
    $("#floor-control").children("div").click(function(){
        $("html").animate({
            scrollTop: 0
        })
    })
    $(document).on("scroll",function(){
        for(var i=0;i<$("#content").children("div").length;i++){
            if($(document).scrollTop()>$("#content").children("div").eq(i).offset().top-1){
                $("#floor-control").find("li").eq(i).addClass("aaa").siblings().removeClass("aaa")
            }
        }
    })
</script>
<script>$("#header").load("http://localhost:3000/public/public.html .header")</script>
<script>$("#footer").load("http://localhost:3000/public/public.html .footer")</script>
</html>